<template>
  <div>
    <el-popover
      :width="280"
      placement="right-start"
      :show-arrow="false"
      trigger="click"
      transition="none"
      :hide-after="0"
      @show="getContactInfo"
      ref="popoverRef"
    >
      <template #reference>
        <Image :src="src" :width="width" />
      </template>
      <template #default>
        <div class="popover-user-panel">
          <UserBaseInfo :userInfo="userInfo"></UserBaseInfo>
          <div class="op-btn" v-if="userId !== userInfoStore.getInfo().userId">
            <el-button
              v-if="userInfo.status == 1"
              type="primary"
              @click="sendMessage"
              size="small"
              >发消息</el-button
            >
            <el-button v-else type="primary" size="small" @click="addContact"
              >加好友</el-button
            >
          </div>
        </div>
      </template>
    </el-popover>
    <!--添加好友-->
    <SearchAdd ref="searchAddRef"></SearchAdd>
  </div>
</template>

<script setup>
import SearchAdd from "@/views/contact/SearchAdd.vue";
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/stores/UserInfoStore";

const { proxy } = getCurrentInstance();
const router = useRouter();
const userInfoStore = useUserInfoStore();

const props = defineProps({
  src: {
    type: String,
  },
  userId: {
    type: String,
  },
  width: {
    type: Number,
  },
});

//获取用户信息
const userInfo = ref({});
const getContactInfo = async () => {
  userInfo.value.userId = props.userId;
  if (userInfoStore.getInfo().userId == props.userId) {
    userInfo.value = userInfoStore.getInfo();
  } else {
    const params = {
      contactId: props.userId,
    };
    const res = await proxy.Api.queryContactInfo(params);
    userInfo.value = Object.assign({}, res.data);
  }
};

//跳转到具体用户会话
const popoverRef = ref();
const emit = defineEmits(["closeDrawer"]);
const sendMessage = () => {
  popoverRef.value.hide();
  emit("closeDrawer");
  router.push({
    path: "/chat",
    query: { contactId: props.userId },
  });
};

//弹出添加好友页面
const searchAddRef = ref();
const addContact = () => {
  popoverRef.value.hide();
  searchAddRef.value.show({
    contactId: props.userId,
    contactType: 0,
  });
};
</script>

<style lang="scss" scoped>
.op-btn {
  text-align: center;
  border-top: 1px solid #eaeaea;
  padding-top: 10px;
}
</style>
